<!--  -->
<template>
  <div>
    <!-- <el-button @click="show" size="small">填写个人信息</el-button> -->
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      size="small"
      :inline="true"
    >
      <el-form-item label="大学级别">
        <el-select v-model="form.insCharacter">
          <el-option
            :label="item"
            name="level"
            v-for="item of name.insCharacter"
            :key="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="大学类型">
        <el-select v-model="form.insType">
          <el-option
            :label="item"
            name="type"
            v-for="item of name.insType"
            :key="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学校性质">
        <el-select v-model="form.eduType">
          <el-option
            :label="item"
            name="type"
            v-for="item of name.eduType"
            :key="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在地">
        <el-select v-model="form.province">
          <el-option
            :label="item"
            name="type"
            v-for="item of name.provinces"
            :key="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即查找</el-button>
        <el-button @click="resort">重置</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-dialog title="报考" :visible.sync="dialogVisible" width="30%">
        <el-form label-position="80px" size="small">
          <el-row :gutter="12">
            <el-col :span="8">
              <el-form-item label="院校">
                <el-input v-model="dialog.collegeName" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="12">
              <el-form-item label="专业">
                <!-- <el-input v-model="dialog.collegeName" /> -->
                <el-select v-model="dialog.majorName">
                  <el-option
                    v-for="item in dialog.major"
                    :label="item"
                    :key="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="applySubmit">确 定</el-button>
        </span>
      </el-dialog>
      <el-tabs v-model="mode">
        <el-tab-pane label="所有" name="all"></el-tab-pane>
        <el-tab-pane label="冲一冲" name="getImpact"></el-tab-pane>
        <el-tab-pane label="稳一稳" name="getSteady"></el-tab-pane>
        <el-tab-pane label="保一保" name="getDefend"></el-tab-pane>
      </el-tabs>
      <div class="box">
        <a-table
          :pagination="pagination"
          :columns="columns"
          :data-source="tableList"
          :rowKey="(record, index) => record.collegesId"
        >
          <span slot="apply" slot-scope="appply, row, index">
            <el-button type="primary" size="small" @click="apply(row)"
              >申请</el-button
            ></span
          >

          <span slot="collegesId" slot-scope="collegesId"
            >【{{ collegesId }}】</span
          >
          <span slot="pic" slot-scope="pic"
            ><a-avatar :src="'http://127.0.0.1:8080' + pic"
          /></span>

          <span slot="eduType" slot-scope="eduType"
            ><a-tag color="purple">{{ eduType }}</a-tag></span
          >
          <span slot="insCharacter" slot-scope="insCharacter">
            <a-tag
              v-for="tag in computeTags(insCharacter)"
              :key="tag"
              :color="computeColor(tag)"
            >
              {{ tag }}
            </a-tag>
          </span>

          <span slot="fields" slot-scope="fields">
            <a-tag
              v-for="tag in computeTags(fields)"
              :key="tag"
              :color="computeColor(tag)"
            >
              {{ tag }}
            </a-tag>
          </span>
          <!-- <span slot="action" slot-scope="text, record">
            <a>Invite 一 {{ record.name }}</a>
            <a-divider type="vertical" />
            <a>Delete</a>
            <a-divider type="vertical" />
            <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
          </span> -->
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import { provinces } from '@/data/table'
import { suggest } from '@/api/major/major'
import { add } from '@/api/aspiration/aspiration'
export default {
  data() {
    const columns = [
      {
        title: '编号',
        dataIndex: 'collegesId',
        key: 'collegesId',
        scopedSlots: { customRender: 'collegesId' }
      },

      {
        title: '学校',
        dataIndex: 'name',
        key: 'name'
        // slots: { title: 'customTitle' },
        // scopedSlots: { customRender: 'name' }
      },
      {
        title: '图标',
        dataIndex: 'pic',
        key: 'pic',
        scopedSlots: { customRender: 'pic' }
      },
      {
        title: '级别',
        dataIndex: 'insCharacter',
        key: 'insCharacter',
        width: '300px',
        // slots: { title: 'customTitle' },
        scopedSlots: { customRender: 'insCharacter' }
      },
      {
        title: '院校类型',
        dataIndex: 'eduType',
        key: 'eduType',
        scopedSlots: { customRender: 'eduType' }
      },
      {
        title: '专业',
        dataIndex: 'fields',
        key: 'fields',
        width: '500px',
        scopedSlots: { customRender: 'fields' }
      },
      {
        title: '省份',
        dataIndex: 'province',
        key: 'province',
        scopedSlots: { customRender: 'province' }
      },
      {
        title: '2021分数',
        dataIndex: 'num2021',
        key: 'num2021'
      },
      {
        title: '2022分数',
        dataIndex: 'num2022',
        key: 'num2022'
      },
      {
        title: '2023分数',
        dataIndex: 'num2023',
        key: 'num2023'
      },
      {
        title: '填报',
        dataIndex: 'apply',
        key: 'apply',
        scopedSlots: { customRender: 'apply' }
      }
    ]
    return {
      mode: 'all',
      dialog: {
        major: [],
        collegeName: '',
        majorName: '',
        type: ''
      },
      columns,
      pagination: {
        onChange: page => {
          console.log(page)
        },
        pageSize: 5
      },
      tableList: [],
      total: 0,
      dialogVisible: false,
      name: {
        provinces,
        insCharacter: ['985', '211', '双一流', '研', '本科', '专科'],
        insType: ['综合', '艺术', '工科', '财经'],
        eduType: [
          '公办院校',
          '民办院校',
          '港澳台高校',
          '独立学校',
          '中外合作办学'
        ]
      },
      form: { insCharacter: '', insType: '', province: '', eduType: '' }
    }
  },

  mounted() {
    this.suggestCol()
  },
  watch: {
    mode: {
      handler(newVal) {
        this.suggestCol()
      }
    }
  },
  methods: {
    // change() {},
    applySubmit() {
      // console.log('===')
      if (this.dialog.collegeName && this.dialog.majorName) {
        add({
          userId: JSON.parse(localStorage.getItem('user')).id,
          collage: this.dialog.collegeName,
          field: this.dialog.majorName,
          type: this.dialog.type
        }).then(res => {
          this.$msg.success('添加成功')
          // this.queryData()
          this.dialogVisible = false
        })
      } else {
        this.$msg.error('请选择')
      }
    },
    apply(row) {
      // console.log(row)
      const index = row.insCharacter.indexOf('本科')
      if (index == -1) {
        this.dialog.type = '专科'
      } else {
        this.dialog.type = '本科'
      }
      this.dialog.collegeName = row.name
      this.dialog.major = row.fields.split(',')
      this.dialogVisible = true
    },
    computeColor(color) {
      // console.log(color)
      const len = color.length
      if (len >= 4) {
        return 'orange'
      }
      if (len > 2) {
        return 'green'
      }

      return 'red'
    },
    computeTags(insCharacter) {
      // console.log(insCharacter.split(','))
      return insCharacter.split(',')
    },
    computScore(item) {
      return (
        '2023分数:' +
        item.num2023 +
        '\t2022分数:' +
        item.num2022 +
        '\t2021分数:' +
        item.num2021
      )
    },
    change(curP) {
      this.selectParam.pageNum = curP
      this.suggestCol()
    },
    resort() {
      this.form.insCharacter = ''
      this.form.insType = ''
      this.form.province = ''
      this.form.eduType = ''
    },
    suggestCol() {
      let score = JSON.parse(localStorage.getItem('user')).num
      if (!score) {
        score = 500
      }
      const param = {
        ...this.form,
        num: score,
        mode: this.mode
      }
      suggest(param).then(res => {
        // console.log(res.data)
        this.tableList = res.data
      })
    },
    onSubmit() {
      // console.log(this.form)
      this.suggestCol()
    },
    show() {
      this.dialogVisible = true
    },
    isShow(v) {
      console.log(v)
      this.dialogVisible = v
    }
  }
}
</script>

<style scoped></style>
